<template>
	<view class="container">
		<!-- 页面头部 -->
		<view class="header">
			<view class="header-left" @click="goBack">
				<text class="iconfont icon-back"></text>
			</view>
			<view class="unit-title">{{ unitInfo.name || '单元详情' }}</view>
			<view class="header-right" @click="editUnit">
				<text class="iconfont icon-edit"></text>
			</view>
		</view>
		
		<!-- 主要内容区域 -->
		<view class="content-area">
			<view class="info-card">
				<view class="card-header">
					<text class="card-title">基本信息</text>
				</view>
				<view class="card-content">
					<view class="info-item">
						<text class="label">单元名称</text>
						<text class="value">{{ unitInfo.name || '未命名' }}</text>
					</view>
					<view class="info-item">
						<text class="label">所属小区</text>
						<text class="value">{{ unitInfo.cellName || '未知' }}</text>
					</view>
					<view class="info-item">
						<text class="label">楼层数</text>
						<text class="value">{{ unitInfo.floorCount || 0 }} 层</text>
					</view>
					<view class="info-item">
						<text class="label">单元状态</text>
						<text class="value" :class="{'status-normal': unitInfo.status === '0', 'status-disabled': unitInfo.status === '1'}">
							{{ unitInfo.status === '0' ? '正常' : '停用' }}
						</text>
					</view>
					<view class="info-item">
						<text class="label">创建时间</text>
						<text class="value">{{ unitInfo.createTime || '未知' }}</text>
					</view>
					<view class="info-item" v-if="unitInfo.remark">
						<text class="label">备注</text>
						<text class="value">{{ unitInfo.remark }}</text>
					</view>
				</view>
			</view>
			
			<!-- 房间列表 -->
			<view class="room-list-section" v-if="roomList.length > 0">
				<view class="section-header">
					<text class="section-title">单元房间列表</text>
					<text class="total-count">共 {{ roomList.length }} 间</text>
				</view>
				<view class="room-list">
					<view class="room-item" v-for="(room, index) in roomList" :key="index" @click="goToRoomDetail(room)">
						<view class="room-card">
							<view class="room-name">{{ room.roomName || '未命名房间' }}</view>
							<view class="room-info">
								<view class="info-tag" :class="{'has-tenant': room.tenantCount > 0, 'vacant': room.tenantCount === 0}">
									{{ room.tenantCount > 0 ? '已租' : '空置' }}
								</view>
								<view class="room-arrow">
									<text class="iconfont icon-arrow-right"></text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="empty-room-list" v-else>
				<image class="empty-image" src="/static/images/empty.png" mode="aspectFit"></image>
				<text class="empty-text">暂无房间数据</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { getUnit } from '@/api/lock/unit';
	
	export default {
		data() {
			return {
				unitId: null,
				unitInfo: {},
				roomList: []
			}
		},
		onLoad(options) {
			this.unitId = options.id;
			if (this.unitId) {
				this.getUnitInfo();
			} else {
				uni.showToast({
					title: '参数错误',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		},
		onPullDownRefresh() {
			// 下拉刷新
			if (this.unitId) {
				this.getUnitInfo().finally(() => {
					uni.stopPullDownRefresh();
				});
			} else {
				uni.stopPullDownRefresh();
			}
		},
		methods: {
			// 获取单元详情
			getUnitInfo() {
				uni.showLoading({
					title: '加载中...'
				});
				
				return getUnit(this.unitId).then(res => {
					uni.hideLoading();
					if (res.code === 200) {
						this.unitInfo = res.data || {};
						// 假设房间列表数据在单元详情内
						this.roomList = res.data.rooms || [];
					} else {
						uni.showToast({
							title: res.msg || '获取单元详情失败',
							icon: 'none'
						});
					}
				}).catch(error => {
					uni.hideLoading();
					console.error('获取单元详情失败', error);
					uni.showToast({
						title: '获取单元详情失败',
						icon: 'none'
					});
				});
			},
			
			// 前往房间详情
			goToRoomDetail(room) {
				if (!room || !room.id) {
					uni.showToast({
						title: '房间信息不完整',
						icon: 'none'
					});
					return;
				}
				
				uni.navigateTo({
					url: `/pages/room/details?id=${room.id}`
				});
			},
			
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 编辑单元
			editUnit() {
				if (!this.unitId) {
					uni.showToast({
						title: '无法获取单元信息',
						icon: 'none'
					});
					return;
				}
				
				uni.navigateTo({
					url: `/pages/building/edit?id=${this.unitId}`
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 0;
		background-color: #f5f7fa;
		min-height: 100vh;
	}
	
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		background: linear-gradient(135deg, #4B71F7, #3A5FE0);
		box-shadow: 0 4rpx 20rpx rgba(75, 113, 247, 0.3);
		position: relative;
		
		.header-left, .header-right {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.unit-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #fff;
			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
			flex: 1;
			text-align: center;
		}
		
		.iconfont {
			font-size: 36rpx;
			color: #fff;
		}
	}
	
	.content-area {
		padding: 30rpx 20rpx;
	}
	
	.info-card {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
		margin-bottom: 30rpx;
		overflow: hidden;
		
		.card-header {
			padding: 24rpx;
			border-bottom: 1px solid #f2f2f2;
			
			.card-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				position: relative;
				padding-left: 20rpx;
				
				&::before {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 8rpx;
					height: 32rpx;
					background: #4B71F7;
					border-radius: 4rpx;
				}
			}
		}
		
		.card-content {
			padding: 24rpx;
			
			.info-item {
				display: flex;
				padding: 16rpx 0;
				border-bottom: 1px solid #f8f8f8;
				
				&:last-child {
					border-bottom: none;
				}
				
				.label {
					width: 160rpx;
					font-size: 28rpx;
					color: #909399;
					flex-shrink: 0;
				}
				
				.value {
					flex: 1;
					font-size: 28rpx;
					color: #333;
					
					&.status-normal {
						color: #67C23A;
					}
					
					&.status-disabled {
						color: #909399;
					}
				}
			}
		}
	}
	
	.room-list-section {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
		margin-bottom: 30rpx;
		overflow: hidden;
		
		.section-header {
			padding: 24rpx;
			border-bottom: 1px solid #f2f2f2;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				position: relative;
				padding-left: 20rpx;
				
				&::before {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 8rpx;
					height: 32rpx;
					background: #4B71F7;
					border-radius: 4rpx;
				}
			}
			
			.total-count {
				font-size: 26rpx;
				color: #909399;
			}
		}
		
		.room-list {
			padding: 16rpx;
			
			.room-item {
				margin-bottom: 20rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.room-card {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 24rpx;
					background: #f9f9f9;
					border-radius: 12rpx;
					
					.room-name {
						font-size: 30rpx;
						font-weight: 500;
						color: #333;
					}
					
					.room-info {
						display: flex;
						align-items: center;
						
						.info-tag {
							padding: 4rpx 16rpx;
							border-radius: 20rpx;
							font-size: 24rpx;
							margin-right: 16rpx;
							
							&.has-tenant {
								background-color: rgba(103, 194, 58, 0.1);
								color: #67C23A;
							}
							
							&.vacant {
								background-color: rgba(230, 162, 60, 0.1);
								color: #E6A23C;
							}
						}
						
						.room-arrow {
							.iconfont {
								font-size: 28rpx;
								color: #909399;
							}
						}
					}
				}
			}
		}
	}
	
	.empty-room-list {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 80rpx 0;
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
		
		.empty-image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 20rpx;
		}
		
		.empty-text {
			font-size: 28rpx;
			color: #909399;
		}
	}
	
	@font-face {
		font-family: "iconfont";
		src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAVEAAsAAAAACrwAAAT1AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDMgqHWIZPATYCJAMUCwwABCAFhGcHSxtDCREVpMmRfXFgbvJewJOUkGQlJeHFW9x4z/Lz5Db0/f3OxZE00STUc/T0TfRbJlYThVKJRJJEE6GQiaSb5P5xL73pKkN1IYfKhAbK54bmZWzKFMaGrWjAAYcCG7CxtWq1WmBRvUr8s9+ZXDlQoAGUK1l8A/x/j2+Dt36vy94uuxGNkDQGqXhCIolEqJBI0yC0GpmQWKzJdVIJWXhkFgE8BgQAWHg5QQYHhxggAEqDDnbqlCkrUAJigYlAStCscFIOIR8gEBPzBj4GYF/2+OErZEIAUCAU9Ee1TpJlGL7GfTxaYbQClUoMsjq9AeBsCUADJAAQAPJsZPkg+qMkQC18BYMGgNiiEOY1fi3nTaLGfTwqSrH/gQcECAUNCISLY9x+QQQg8H2oDAjgTbIZEMCbqYKAkE9UZUBxW4vyhAXuJN4H4j6QDqBE84Iic1Ew9gsiRLAOuT9yQ4eaM2ccDXhHzuYw8kXr7qCNUTHm32bFhAw5Gzl8nM3JxLjN0WGP2ZlzW+0REZY9+6KyZs1E+fqTofSsKJSZZb+5LL3nkF9/qe1lm43ZXmvvLz5wy9NfxN24Eb/53GDVzZsJt2+HVcHT+RFoW8OeqGTUzUjPuVKk91aGb39/9P3Drrv3FUGpMJ9TOZQ68eXpYOzLl7GUJ+Xnz5YbnO0dp05FHPJpDtb3OVPbntBY6nQpLs0d8ZJ1I17RRJTd6W28Z1sQMfXylcsT7l2eeE/eVk+dqNYUPGvXrkkpP/f+IKWoP7Bz5+AK8srzrKJd2/OUAUiTm6+Vz5wpqSvW9l/YHrR8eYJixQpRrLi/Qrs4f7O99YoVKVT5iorTvapG8bGJxGYlO28pO9XXtauSqlMh8+fP/9fvQouJnj1YlM+e5bd2ZzEwqOipKZ6ggDNXK79bnGBQvL+RrZPIqJ3ZeW2yh1KrQT8wkHzQ2lUK1lJvxcvTZ7pqzlK0NWtvXVa1PK3qttV1l3J1tUNVs+2YmZZiytPSfIvz9rDiVKnepNXX5j8bGDi4LiDgVv8nZnb0Jq3FMdNXXOHKV11+8nh76+/eObfuBTcU/u5PoEgqPmHkWXXcWq+3xAZZvCuTfXPT1n5d/IuDMmzFr+xE/1uMU5KbPbnxmJ9rWIa9fTtcs9cuP6OT5E3RK9e4nVdueF2w2JjZNtPYxnXGybwpnZfdZAU76Rd377j3oTpv9+6rcdRs+f0Rj9OXJGzT9y/7tL/GUE2R/uiTz/JJSk4+PndFf/v2/vnLjf//n7nVTwC1rfbfHD1RrVZQGS0AvkHfXn32YVS86hNPXWL7I5odg7+2TkCAFoAXN4ePdcbHzK9jyvHrqvCWfIoYSGphAiQ8j1Ix5/U6C0i2c1tVVHW/eEIoDVaaCu0dgDA2DDp2/0ETGwGaMFRnSeY2QWkp1xjwC4BgRAlQSLMAmkVIBVDBLgJNPMUASzQ3Ol2QLh1RcgkQZ0MAsWE9KNZtA83GKAJo2nVQHXcDmg0vIHRLLIJPFrcP0asFYvigGMMXKlVdWYbT6Ck6kppHsWjsHC2TG1Atj+kpplhFbZFmVTvPZTEBWTZGZXEd+VwpMhgjJ1KTTqehPJfTDV6UkbBmWSm6IoBiGPhCMgx+QUpKnTJ7OY3W5ydiiahxUSzMUFwuI82g1OQiC1sMU2iXEGuRykw3ZqVixABZbEbKxEphsJYiUQMHnEQppZM2hJLjcnTG5QRPA0+YULlZrNBU3m8tvd8tAGDRxiARCqGRDPLTZrTZsOlJdZXV1VVP3TZwkrGpVbBVpQ0lZdS1QsXLbAGLCgAA') format('woff2');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 32rpx;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-arrow-right:before {
		content: "\e644";
	}
	
	.icon-back:before {
		content: "\e679";
	}
	
	.icon-edit:before {
		content: "\e66e";
	}
</style> 